<template>
	<!-- 栏目首页 -->
	<view class="ray-list content">
		<view class="ray-list__header fixed">
			<wuc-tab :tab-list="navList" :tabCur.sync="nodeType" tab-class="tabs" select-class="tab-selected" textFlex @change="tabChange"></wuc-tab>
		</view>
		<view class="ray-list__body list-panel" style="margin-top: 90rpx;">
			<view class="list-view">
				<view class="ray-panel">
					<view class="ray-content">
						<view @click="goToDetail(item)" class="class-item" v-for="(item, index) in list" :key="index">
							<view class="item-border">
								<image :src="item.imgUrl" mode="aspectFill"></image>
								<view class="content">{{ item.subjectName }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ray-list__foot"><mix-load-more :status="loadMoreStatus"></mix-load-more></view>
	</view>
</template>

<script>
import http from '../../common/request.js';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
import {getCommonShareInfo} from '@/common/utils.js'
export default {
	onShareAppMessage() {
		return getCommonShareInfo()
	},
	data() {
		return {
			nodeType: 0,
			pageNum: 1,
			pageSize: 12,
			allowRequest: true,
			loadMoreStatus: 0, //0加载前，1加载中，2没有更多了
			list: [],
			navList: []
		};
	},
	onLoad: function(option) {
		//页面第一次加载是会触发，可以把一些不需要实时更新的数据放入
		this.activeIndex = option.index;
	},
	components: {
		mixLoadMore
	},
	onReachBottom: function() {
		this.loadData();
	},
	created() {
		this.getNavList();
	},
	methods: {
		reset() {
			//重置查询第一页
			this.pageNum = 1;
			this.allowRequest = true;
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
			this.list = [];
		},
		getParameters() {
			const { navList, nodeType, pageNum, pageSize } = this;
			const result = { pageNum, pageSize };
			const key = navList[nodeType].dictValue;
			if (key !== undefined) {
				result.socialCommunity = key;
			}
			return result;
		},
		loadData(flag) {
			const { list, pageNum, pageSize, allowRequest } = this;
			if (!allowRequest) {
				return;
			}
			this.loadMoreStatus = 1;
			http('/api/sysSubjectInfo/appSubjectList', { data: { ...this.getParameters() }, method: 'GET' }).then(
				result => {
					if (result.data) {
						this.allowRequest = result.total / pageSize > pageNum;
						if (this.allowRequest) {
							this.loadMoreStatus = 0;
						} else {
							this.loadMoreStatus = 2;
						}
						this.pageNum++;

						this.list = list.concat(result.data || []);
						this.loading = this.list.length === 0 ? 3 : this.loading;
					} else {
						this.loadMoreStatus = 0;
					}
				},
				result => {
					this.loadMoreStatus = 0;
				}
			);
		},
		tabChange(index) {
			this.nodeType = index;
			this.reset();
			this.loadData();
		},
		// onReachBottom() {
		// 	this.loadData();
		// },

		// 获取导航
		getNavList: function() {
			//数据到底,触发这个函数
			http('/api/sysSubjectInfo/appSysDictDataList', {
				method: 'get'
			}).then(res => {
				const result = res.data || [];
				for (let item of result) {
					item.name = item.dictLabel;
				}
				result.unshift({ name: '全部', dictValue: '' });
				this.navList = result;
				this.loadData();
			});
		},
		goToDetail(item) {
			uni.navigateTo({
				url: '/home/classRoom/class?subjectId=' + item.subjectId,
				success: res => {
					console.log('成功');
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>
<style scoped lang="less">
.ray-panel {
	.ray-content {
		.content {
			font-family: 'PingFangSC-Light';
			margin: 20rpx;
			font-size: 28rpx;
			font-weight: 300;
			color: #66645d;
			line-height: 40rpx;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			min-height: 40rpx !important;
		}
	}
}	
</style>